<template>
  <div class="StoreStatusPanel">
    <div class="StoreStatusPanel-title">店铺状态</div>
    <div class="StoreStatusPanel-cards">
      <div class="StoreStatusPanel-card" v-for="c in cards" :key="c.key">
        <div class="StoreStatusPanel-card-label">{{ c.label }}</div>
        <div class="StoreStatusPanel-card-value">{{ c.value }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import {getStoreStatus} from '../../../api/systemApi.js'

const cards = ref([
  {key: 'product', label: '商品数量', value: 0},
  {key: 'supplier', label: '供应商数量', value: 0},
  {key: 'customer', label: '客户数量', value: 0}
])

const loadStatus = async () => {
  const res = await getStoreStatus()
  if (res && typeof res === 'object') {
    cards.value = [
      {key: 'product', label: '商品数量', value: res.productCount ?? 0},
      {key: 'supplier', label: '供应商数量', value: res.supplierCount ?? 0},
      {key: 'customer', label: '客户数量', value: res.customerCount ?? 0}
    ]
  }
}

onMounted(loadStatus)
</script>
<style scoped lang="scss">
.StoreStatusPanel {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid #e8ebf0;
  border-radius: 12px;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow .2s ease;
  overflow: hidden;

  &:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.06);
  }

  &-title {
    font-size: 18px; // 由16提升到18
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
    text-align: left; // 显式设置标题居左
  }

  &-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    flex: 1;
    align-content: start;
  }

  &-card {
    position: relative;
    background: #f8f9fb;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; // 明确与 TodayBusinessPanel 对齐一致
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: default;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    aspect-ratio: 1 / 1; /* 正方形 */
    overflow: hidden;

    &:hover {
      background: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    &-label {
      font-size: 14px;
      color: #606266;
      font-weight: 500;
    }

    &-value {
      font-size: 22px;
      font-weight: 600;
      color: #409EFF;
      line-height: 1;
      letter-spacing: .5px;
    }
  }
}
</style>
